<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/layui/css/layui.css" media="all">
    <style>
        .usg-div{
            height: 100%;
            border: 1px solid #dddddd;
            overflow-y:scroll;
            margin-left: 10px;
            margin-right: 15px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="usg-div">
    <table class="layui-hide" id="proccess" lay-filter="proccess" ></table>
    <script type="text/html" id="toolbar">
        <div class="layui-inline">
            <input class="layui-input" id="input" autocomplete="off" placeholder="进程名称" value="">
        </div>
        <button class="layui-btn" id = "search" data-type = "reload">查询</button>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="over">结束</a>
    </script>
</div>
</body>
</html>
<script src="/static/admin/js/layui.js" charset="utf-8"></script>
<script src="/static/js/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="/static/js/jquery.cookie.js" charset="utf-8"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#proccess'
            ,url:'process_data.html'
            ,height: 'full-30'
            ,toolbar: '#toolbar'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'order', title:'序号',align:'center', width:80,fixed: 'left', unresize: true, sort: true,}
                ,{field:'name', width:'15%', title: 'name'}
                ,{field:'username', width:'20%', title: 'username'}
                ,{field:'create_time', width:'10%', title: 'create_time', sort: true}
                ,{field:'pid', width:'10%', title: 'pid', sort: true}
                ,{field:'physical_memory', width:'10%', title: 'physical_memory', sort: true}
                ,{field:'virtual_memory', width:'10%', title: 'virtual_memory', sort: true}
                ,{field:'status', width:'10%', title: 'status', sort: true}
                ,{ title:'操作',align:'center',toolbar: '#barDemo'}
            ]]
            ,page: true
            ,id:'proccess'
        });
        //监听工具条
        table.on('tool(proccess)', function(obj){
            var data = obj.data;
            if(obj.event === 'over'){
                var index = layer.confirm('你确定要结束当前进程？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    layer.load(0, {shade: [0.2, '#5B5B5B']});
                    $.ajax({
                        url: 'process.html',
                        type: 'POST',
                        data:{'key': 'over','base':data.pid},
                        headers:{'X-CSRFtoken':$.cookie('csrftoken')},
                        success: function (base) {
                            if (base == 'true'){
                                layer.msg('操作成功！', {icon: 1});
                                setTimeout("window.location.reload();", 2000 )
                            }else {
                                layer.msg('操作失败，请联系管理员！', {icon: 2});
                                layer.close(index);
                            }
                        }
                    })
                });
                return false;
            }
        });
        var $ = layui.$, active = {
            reload:function(){
                var values =$("#input").val();
                var index = layer.load(2, {shade: [0.2, '#5B5B5B']});
                table.reload('proccess',
                    {page:
                            {
                                curr: 1 //重新从第 1 页开始
                            }
                        ,where: {keyword:values}//这里传参  向后台
                    });
                $("#input").attr("value", values);
                layer.close(index);
            }
        };
        $('body').on('click','#search', function(){
            var type = 'reload';
            active[type] ? active[type].call(this) : '';
        });
        document.onkeydown = function(){
            if(window.event.keyCode == 13){
                $('#search').click()
            }
        }
    });
</script>